<template>
  <u-popup :show="showPopup" mode="bottom" :closeable="true" :border-radius="26" @close="showPopup = false">
    <view class="product-box">
		<image class="product-img" :src="goods.goods_images[0].preview_url" mode="aspectFill" @click="previewImage"></image>
		<view class="product-msg">
			<view class="price"><text class="sym">￥</text>{{goods.goods_price_min}}</view>
			<view class="stock">库存： {{goods.stock_total}}</view>
		</view>
	</view>
	<view class="num">
		<view>数量：</view>
		<u-number-box v-model="value" :min="goods.stock_total > 0 ? 1 : 0" :max="goods.stock_total"></u-number-box>
	</view>
	<view class="btn" @click="addCart">
	  <text>加入购物车</text>
	</view>
  </u-popup>
</template>

<script>
  
  export default {
    props: {
      goods: {
		  type: Object,
		  default: () => {}
	  }
    },
    data() {
      return {
        showPopup: false,
		value: 1
      }
    },
    created() {
     
    },

    methods: {
		open() {
			this.showPopup = true
		},
		addCart () {
			if(this.goods.stock_total === 0) {
				uni.showToast({
				  title: '此商品暂无库存',
				  icon: 'none'
				})
				return
			}
			uni.setStorageSync('cartList', JSON.stringify([{goods_num: this.value, ...this.goods}]))
			this.$emit('addCart', this.value)
			this.showPopup = false
		}
    }
  }
</script>

<style lang="scss" scoped>
	.product-box{
		display: flex;
		align-items: center;
		margin: 60rpx 40rpx;
		.product-img{
			width: 200rpx;
			height: 200rpx;
		}
		.product-msg{
			.price{
				color: #fa2209;
				font-size: 45rpx;
				.sym{
					font-size: 30rpx;
				}
			}
			.stock{
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #666;
			}
		}
	}
	.num{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 40rpx;
	}
	.btn{
		font-size: 30rpx;
		padding: 20rpx 0;
		color: #fff;
		margin: 40rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to right, #ffb100, #ffb900);
		color: #fff;
	}
</style>